<template>
  <div>
    <!-- 列表组件 -->
    <!-- 有数据展示 -->
    <van-list v-if="cartList.length > 0">
      <!-- 购物车商品展示 -->
      <van-swipe-cell
        class="warp"
        v-for="(item, idx) in cartList"
        :key="item.id"
      >
        <van-card
          :num="item.num"
          :price="item.price.toFixed(2)"
          :title="item.goodsname"
          class="goods-card"
          :thumb="$img + item.img"
        >
          <template #tag>
            <van-checkbox
              v-model="item.status"
              checked-color="#ee0a24"
              @change="checkOne($event, idx)"
            />
            <!-- v-model="item.status==1?true:false" -->
          </template>
          <template #num>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              @minus="minus(item.id)"
              @plus="plus(item.id)"
              disable-input
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            @click="del(item.id)"
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </van-list>
    <!-- 无数据展示 -->
    <van-list v-else>
      <van-empty description="购物车空空如也,快去买买买！！！" />
    </van-list>
    <van-submit-bar :price="allPrice * 100" button-text="提交订单">
      <van-checkbox checked-color="#ee0a24" v-model="checkedAll" @click="All"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
// 引入Dialog方法
import { Dialog, Toast } from "vant";
import { cartList, deleteCart, postCartDit } from "../util/axios/index";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      checked: 1,
      cartList: [], //购物车列表
      checkedAll: false,
      radio: 1,
    };
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
    allPrice() {
      let sum = 0;
      this.cartList.map((item) => {
        //只有被选中的列表才进行数据累加
        if (item.status) {
          sum += item.price * item.num;
        }
      });
      return sum.toFixed(2);
    },
  },
  // 进入组件之前触发的路由守卫
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("userInfo")) {
      //如果登录了就跳转到购物车
      next();
    } else {
      //未登录，让他去登录
      Dialog.confirm({
        title: "未登录",
        message: "购物车必须登录才能查看，请快去登陆！",
      })
        .then(() => {
          //确定
          next("/login");
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  mounted() {
    cartList({
      uid: this.getUserInfo.uid,
    }).then((res) => {
      this.cartList = res.list;
    });
  },
  methods: {
    del(id) {
      deleteCart({ id }).then((res) => {
        if (res.code == 200) {
          Toast.success(res.msg);
          cartList({
            uid: this.getUserInfo.uid,
          }).then((res) => {
            this.cartList = res.list ? res.list : [];
          });
        }
      });
    },
    // 全选
    All() {
      this.cartList.forEach((item) => {
        item.status = this.checkedAll == true ? 1 : 0;
      });
      Toast.loading({
        message: "加载中...",
        duration: 500,
        forbidClick: true,
      });
    },
    // 单选
    checkOne(e, idx) {
      this.cartList[idx].status = e ? 1 : 0;
      this.checkedAll = this.cartList.every((item) => item.status);
      Toast.loading({
        message: "加载中...",
        duration: 500,
        forbidClick: true,
      });
      // 修改数据库
      postCartDit({
        id: this.cartList[idx].id,
        status: e ? 1 : 0,
      }).then(() => {
        Toast.loading({
          message: "加载中...",
          duration: 500,
          forbidClick: true,
        });
      });
    },
    // 商品数量 --
    minus(id) {
      postCartDit({
        id,
        type: 1,
      }).then(() => {
        Toast.loading({
          message: "加载中...",
          duration: 500,
          forbidClick: true,
        });
      });
    },
    // 商品数量 ++
    plus(id) {
      postCartDit({
        id,
        type: 2,
      }).then(() => {
        Toast.loading({
          message: "加载中...",
          duration: 500,
          forbidClick: true,
        });
      });
    },
  },
};
</script>

<style lang="" scoped>
.delete-button {
  height: 100%;
}
.van-submit-bar {
  margin-bottom: 0.5rem;
}
.warp >>> .van-image {
  padding-left: 25px;
}
.warp >>> .van-card__tag {
  top: 42px;
}
.warp >>> .van-card__content {
  padding-left: 25px;
}
</style>